<!--新增巡检订单-->
<template>
  <div class="main">
    <el-steps :active="active" finish-status="success">
      <el-step title="筛选设备"> </el-step>
      <el-step title="补充说明"> </el-step>
    </el-steps>

    <div class="info-container" v-show="active==1">
      <div class="info-container">
        <div class="info-container_body">
          <div class="form-section">
            <div class="form-section_title">范围选择</div>

            <el-form class="tool-search" :model="item" ref="queryFormRef" :inline="true">
              <el-form-item
                label="行政区域"
                :rules="[
        {
          required: true,
        }]"
              >
                <RegionSelect v-model="item.regionCode" placeholder="行政区域" clearable />
              </el-form-item>
              <el-form-item
                label="时间范围"
                :rules="[
        {
          required: true,
        }]"
              >
                <el-date-picker
                  v-model="times"
                  type="datetimerange"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  format="YYYY-MM-DD hh:mm:ss"
                  value-format="YYYY-MM-DD hh:mm:ss"
                />
              </el-form-item>
            </el-form>
          </div>
          <Station ref="station" :data="item"></Station>
        </div>
      </div>
      <div class="info-container_footer">
        <el-button @click="handleCancel">取消</el-button>
        <el-button type="primary" @click="nextStep(2)">下一步</el-button>
      </div>
    </div>

    <div class="info-container" v-show="active==2">
      <div class="info-container_body">
        <el-form ref="refFrom" label-position="top" class="demo">
          <div class="form-section">
            <div class="form-section_title">摘要信息</div>
            <el-form ref="refFrom" label-position="top">
              <el-row>
                <el-col :span="5">
                  <el-form-item label="区域"> {{item.regionCode}}</el-form-item>
                </el-col>
              </el-row>
            </el-form>
          </div>
          <div class="form-section">
            <div class="form-section_title">巡检信息</div>

            <vxe-table ref="tableRef" :data="items" v-loading="loading">
              <vxe-table-column :resizable="true" type="seq" title="序号" width="80" sortable> </vxe-table-column>
              <vxe-table-column :resizable="true" field="deviceId" title="设备编号" sortable> </vxe-table-column>
              <vxe-table-column :resizable="true" field="deviceType" title="设备类型" sortable>
                <template #default="{ row }">
                  {{marchType(row.deviceType,deviceTypes)}}
                </template>
              </vxe-table-column>
              <vxe-table-column :resizable="true" field="placeName" title="站房名称" sortable> </vxe-table-column>
            </vxe-table>
          </div>
          <div class="form-section">
            <div class="form-section_title">补充说明</div>
            <el-input v-model="item.remarks" :rows="3" type="textarea" placeholder="补充说明" />
          </div>
          <div class="form-section">
            <div class="form-section_title">处理信息</div>

            <el-form ref="refFrom" label-position="top">
              <el-row>
                <el-col :span="10">
                  <el-form-item label="处理人">
                    <el-select
                      v-model="item.processUser"
                      filterable
                      remote
                      reserve-keyword
                      placeholder="处理人"
                      remote-show-suffix
                      :remote-method="queryUserList"
                      :loading="loading"
                      style="width: 240px"
                    >
                      <el-option v-for="item in users" :key="item.userId" :label="item.nickName" :value="item.userId" />
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="10">
                  <el-form-item label="完成时间">
                    <el-date-picker
                      v-model="item.finishTime"
                      type="datetime"
                      placeholder="完成时间"
                      format="YYYY-MM-DD hh:mm:ss"
                      value-format="YYYY-MM-DD hh:mm:ss"
                    />
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>
          </div>
        </el-form>
      </div>

      <div class="info-container_footer">
        <el-button @click="handleCancel">取消</el-button>
        <el-button @click="handleExport">导出</el-button>
        <el-button type="primary" @click="nextStep(1)">上一步</el-button>
        <el-button type="primary" @click="handleSave">确定</el-button>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { defineAsyncComponent } from 'vue';
import { listMaintenance, addMaintenance, updateMaintenance, delMaintenance, exportMaintenance } from '@/api/station/maintenance/index';
import { listUser } from '@/api/system/user/index';

import common from '@/utils/common.ts';

export default {
  components: {
    Station: defineAsyncComponent(() => import('./patrol/station.vue'))
  },
  props: {
    data: {}
  },
  computed: {
    times: {
      get() {
        return [this.item.startFrom, this.item.endTo];
      },
      set(value) {
        this.item.startFrom = value[0];
        this.item.endTo = value[1];
      }
    },

    //异常订单金额
    orderAmount: {
      get() {
        let orderAmount = 0;
        let orders = this.item.orders;
        orders.forEach((order) => {
          orderAmount += order.totalOrderAmount;
        });
        return orderAmount;
      },
      set(value) {
        this.item.orderAmount = value;
      }
    },

    items: {
      get() {
        let orders = this.item.orders;
        let devices = this.item.devices;

        let items = [];
        devices.forEach((device) => {
          items.push({
            id: device.deviceNo,
            deviceNo: device.deviceNo,
            deviceId: device.deviceId,
            deviceType: device.deviceType,
            deviceIssue: device.errorReasonPlain,
            placeName: device.stationName,
            placeType: '1',
            roomNo: device.room,
            roomPosition: device.roomPosition,
            causeType: '1',
            occurrenceTime: device.overTime,
            orderAmount: 0
          });
        });

        return items;
      },
      set(value) {
        this.item.items = value;
      }
    }
  },
  data() {
    return {
      loading: false,
      active: 1,
      users: [],
      placeType: [
        { label: '站房', value: '1' },
        { label: '酒店', value: '2' }
      ],
      causeType: [
        { label: '设备故障', value: '1' },
        { label: '异常终端', value: '2' }
      ],
      deviceTypes: [
        { label: '供氧终端', value: '1' },
        { label: '充氧终端', value: '2' },
        { label: '泄漏检测终端', value: '3' },
        { label: '制氧机', value: '4' },
        { label: '氧气储罐', value: '5' },
        { label: '智能电表', value: '6' }
      ],
      roomPosition: [
        { label: '靠门', value: '0' },
        { label: '靠窗', value: '1' },
        { label: '靠中间', value: '2' }
      ],
      item: {
        billNo: '',
        regionCode: '',
        status: '0',
        type: '2',
        startFrom: '',
        endTo: '',
        startTime: '',
        finishTime: '',
        processDuration: 0,
        processUser: '',
        alertNum: 0,
        orderNum: 0,
        orderAmount: 0,
        remarks: '',
        deviceId: 0,
        orders: [],
        devices: []
      }
    };
  },
  mounted() {
    const { proxy } = getCurrentInstance() as ComponentInternalInstance;
    this.proxy = proxy;

    const route = useRoute();

    this.init();
  },
  methods: {
    init() {},

    /**
     * 下一步
     */
    nextStep(value) {
      this.active = value;
    },

    handleCancel() {
      //   this.$emit('hideRight');
    },

    /**
     * 获取用户列表
     */
    queryUserList(name) {
      listUser({ nickName: name }).then((res) => {
        if (res.code == 200) {
          this.users = res.rows;
        }
      });
    },

    handleSave() {
      let data = this.item;
      if (data.planId == null) {
        //新增
        this.add();
      } else {
        //编辑
        this.update();
      }
    },

    add() {
      this.loading = true;
      addMaintenance(this.item)
        .then((res) => {
          this.loading = false;
          if (res.code == 200) {
            ElMessage.success('操作成功');
            this.proxy?.$tab.closePage();
          } else {
            ElMessage.error(res.msg);
          }
        })
        .catch(() => {
          this.loading = false;
        });
    },

    update() {
      this.loading = true;
      updateMaintenance(this.item)
        .then((res) => {
          this.loading = false;
          if (res.code == 200) {
            ElMessage.success('操作成功');
            this.proxy?.$tab.closePage();
          } else {
            ElMessage.error(res.msg);
          }
        })
        .catch(() => {
          this.loading = false;
        });
    },

    /**
     * 导出
     */
    handleExport() {
      exportMaintenance(this.item)
        .then((res) => {
          this.loading = false;
          debugger;
          if (res.code == 200) {
            this.$emit('hideRight');
          } else {
            ElMessage.error(res.msg);
          }
        })
        .catch(() => {
          this.loading = false;
        });
    },
    /**
     * 匹配结果
     */
    marchType(value, types) {
      for (let i = 0; i < types.length; i++) {
        let type = types[i];
        if (type.value == value) return type.label;
      }
    }
  }
};
</script>
<style lang="scss" scoped>
.main {
  height: 100%;
  padding: 10px;

  .myPager {
    width: 100%;
    height: 50px;
    text-align: right;
  }
}

.info-container {
  height: calc(100% - 50px);
}
</style>
<style>
</style>